<template>
  <view class="add-card">
    <view class="form-wrap">
      <u-form labelPosition="left" :model="formMode" :rules="rules" ref="uForm" errorType="border-bottom" :labelWidth="80">
        <view class="form-top">
          <u-form-item :label="$t('login.xingMing')" prop="name" borderBottom ref="item1" required>
            <view class="form-item">
              <u-input v-model="formMode.name" border="none" :placeholder="$t('login.shuRuXm')" />
            </view>
          </u-form-item>
          <u-form-item :label="$t('bank.shenFenZh')" prop="idCard" ref="item1" required>
            <view class="form-item">
              <u-input v-model="formMode.idCard" border="none" type="number" :placeholder="$t('bank.shuRuSfZ')" />
            </view>
          </u-form-item>
        </view>
        <view class="form-bottom">
          <u-form-item :label="$t('bank.yinHangKh')" prop="bankNumber" borderBottom ref="item1" required>
            <view class="form-item">
              <u-input v-model="formMode.bankNumber" border="none" type="number" :placeholder="$t('bank.shuRuYhKh')" />
            </view>
          </u-form-item>
          <u-form-item :label="$t('bank.kaiHuH')" prop="bankDeposit" borderBottom ref="item1">
            <view class="form-item">
              <picker @change="bankPickerChange" :value="defaultIndex" :range="bankTypeList" range-key="name" class="picker-wrap">
                <view class="picker">
                  <view>{{ bankTypeList[defaultIndex].name || '' }}</view>
                  <u-icon name="arrow-down-fill" color="#ccc" size="14" />
                </view>
              </picker>
            </view>
          </u-form-item>
          <u-form-item :label="$t('bank.kaiHuZh')" prop="bankBranch" ref="item1" required>
            <view class="form-item">
              <u-input v-model="formMode.bankBranch" border="none" :placeholder="$t('bank.shuRukhZh')" />
            </view>
          </u-form-item>
          <!-- <u-form-item label="验证码" prop="age"  ref="item1" required>
            <view class="form-item">
              <u-input placeholder="请输入验证码" border="none" type="number" v-model="formModeformMode.code" customStyle="height:50px;padding: 0 15px">
                <u-text slot="suffix" :text="tips" color="#75CECC" @click="getCode" />
              </u-input>
            </view>
          </u-form-item> -->
        </view>
      </u-form>
    </view>

    <view class="next">
      <u-button type="success" loadingText="加载中" color="#75CECC" @click="submit">{{ $t('bank.tianJia') }}</u-button>
    </view>

    <u-code :seconds="60" uniqueKey="add_card" ref="uCode" @change="codeChange" :startText="$t('login.huoQuYzM')" :endText="$t('login.huoQuYzM')" />
  </view>
</template>

<script>
import uploadImage from "../../components/uploadImage.vue";
export default {
  components: {
    uploadImage,
  },
  data() {
    return {
      formMode: {
        name: "",
        idCard: "",
        bankNumber: "",
        bankDeposit: "",
        bankBranch: "",
      },
      tips: "",
      imgList: [],
      rules: {
        name: {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        idCard: {
          type: "string",
          required: true,
          message: "请选择注册类型",
          trigger: ["blur", "change"],
        },
        bankNumber: {
          type: "string",
          required: true,
          message: "请上传营业执照",
          trigger: ["blur", "change"],
        },
        bankBranch: {
          type: "string",
          required: true,
        },
      },
      bankTypeList: [],
      defaultIndex: null,
    };
  },
  onLoad(options) {
    this.getcomboxList();
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("bank.tianJiaYhK"),
    });
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    async getcomboxList() {
      const res = await this.$api.comboxList({});
      if (res.code === 0) {
        this.bankTypeList = res.data.bankList;
      }
    },
    getCode() {},
    bankPickerChange(e) {
      this.defaultIndex = e.detail.value;
    },
    submit() {
      this.$refs.uForm
        .validate()
        .then(() => {
          this.formMode.bankDeposit =
            this.bankTypeList[this.defaultIndex]?.code || "";
          this.$api.saveOrUpdateUserCard(this.formMode).then((res) => {
            if (res.code === 0) {
              uni.$u.toast(this.$t("login.tianJiaCg"));
              // uni.redirectTo({ url: "/pages/card_list/card_list" });
              uni.navigateBack();
            } else {
              uni.$u.toast(res?.msg);
            }
          });
        })
        .catch((errors) => {
          uni.$u.toast(this.$t("login.jiaoYanSb"));
        });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f6 !important;
}
</style>
<style lang="scss" scoped>
.add-card {
  overflow: hidden;
}
.form-wrap {
  overflow: hidden;
  width: calc(100% - 40px);
  margin: 20px auto 0;
}
.form-top {
  background-color: #fff;
  border-radius: 8px;
  padding: 5px 20px;
}
.form-bottom {
  margin-top: 30px;
  background-color: #fff;
  border-radius: 8px;
  padding: 5px 20px;
}
/deep/.u-radio:last-child {
  margin-left: 20px; /* 设置radio按钮之间的水平间距为20px */
}
.uploads-img {
  display: flex;
  padding-top: 20px;
  height: 110px;
  overflow: hidden;
}
.form-item {
  height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.next {
  padding: 0 30px;
  overflow: hidden;
  height: 60px;
  margin-top: 40px;
}
.picker-wrap {
  width: 100%;
  height: 30px;
  flex: 1;
}
.picker {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
